@import (reference) '../../../app/less/typography';
@import (reference) '../../../app/less/app-icons';
@import (reference) '../../../ui/directives/transactionInfo/transactionInfo';
@import (reference) 'config';
@import (reference) 'icons';

md-dialog.modal-send {
  md-dialog-content {

    position: relative;
    padding: 0;
    overflow: hidden;
    color: @color-disabled-900;

    .modal-content,
    .tab-container,
    .tab-body-wrap,
    w-tabs,
    w-tab,
    .step-list,
    w-step-by-step,
    w-step,
    w-step > div {
      height: 100%;
    }

    .error-content,
    w-mass-send,
    w-single-send {
      display: block;
      max-height: calc(90vh ~'- 60px');
    }

    w-step.send-form .tab-body-wrap {
      display: block;
      @media screen and (min-width: 541px) {
        padding: 40px 40px 0;
      }
    }

    .icon-browser-warning {
      margin-top: 60px;
    }

    &::after {
      display: none;
    }

    .modal-content {
      overflow: auto;
      position: relative;

      .error-title {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 40px;
        z-index: 10;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid @color-disabled-200;
      }

      .plate-note {
        margin: 0 0 20px;
      }

      .help-icon__content {
        left: 40px;
        width: calc(100% ~'- 80px');
      }
    }

    w-transaction-info {
      display: block;
    }

    w-confirm-gateway-transaction,
    w-confirm-transaction {
      .buttons-wrapper w-button {
        &::after {
          display: block;
          content: '';
          height: 40px;
        }
      }
    }

    w-sign-button {
      &::after {
        display: block;
        content: '';
        height: 40px;
      }
    }

    w-confirm-gateway-transaction,
    w-confirm-transaction {
      display: block;
      padding: 0 40px;
      max-height: calc(90vh ~'- 60px');
    }

    .total-amount {
      background-color: @color-basic-50;
      border: 1px solid @color-basic-200;
    }

    .plate-warning {
      &.server-error {
        margin-bottom: 30px;
        justify-content: center;
      }
    }

    w-qr-code {
      display: block;
    }

    w-qr-code-read {
      position: absolute;
      height: 34px;
      width: 56px;
      right: 0;
      top: 50%;
      margin-top: -17px;
      margin-left: auto;
      margin-right: auto;
      border-left: 1px solid @color-basic-200;

      .btn {
        &::before {
          width: 38px;
          height: 32px;
          background-size: 38px;
          cursor: pointer;
        }

        &.active {
          &::before {
            background: @modal-qr-active-close no-repeat center;
          }

          &::after {
            width: 10px;
            height: 10px;
            content: '';
            display: block;
            background: @color-basic-200;
            left: -8px;
            position: absolute;
            top: 50%;
            z-index: 1;
            transform: rotate(45deg) translateY(-50%);
          }
        }
      }
    }

    .read-address-wrap w-input:not(.no-validate) .w-input-wrap::after {
      right: 70px;
    }

    .read-address-wrap {
      position: relative;

      .w-input-wrap input {
        padding-right: 54px;
      }
    }

    .asset__name {
      margin-left: 10px;
      max-width: 122px;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;

      &.split-half {
        justify-content: space-between;
        width: 100%;

        & > div.flex-row:last-child {
          text-align: right;
          justify-content: flex-end;
        }
      }
    }

    .row {
      margin-bottom: 20px;
      position: relative;

      &:first-child {
        margin-top: 10px;
      }

      &:last-child {
        margin-top: 10px;
      }

      &.margin-1 {
        margin-bottom: 10px;
      }
    }

    textarea {
      resize: vertical;
      min-height: 77px;
      max-height: 300px;
    }

    w-select {

      .asset {
        &__name {
          font-size: 15px;
          @media screen and (max-width: 540px) {
            font-size: 13px;
          }
        }

        &__balance {
          font-size: 15px;
          display: flex;
          @media screen and (max-width: 540px) {
            font-size: 13px;
          }
        }

        &__amount {
          max-width: 100px;
        }
      }

      .title {
        overflow-x: hidden;
      }

      .expanded {
        .select-list {
          margin-bottom: 40px;
        }
      }

      .select-list {
        max-height: 325px;
        overflow: auto;
      }
    }

    .input-like {
      position: relative;
      padding: 0 20px;
      border-radius: @border-radius;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow-x: hidden;
    }

    .amount-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .amount-modal-icon {
      background-image: @double-arrow;
      background-size: 100% 100%;
      width: 24px;
      height: 20px;
      margin: 7px;
    }

    w-balance {
      vertical-align: top;
      white-space: nowrap;

      &.asset__amount {
        max-width: 100px;
      }
    }

    w-balance-input {
      width: 204px;

      .input-wrap .w-input-wrap input {
        padding-right: 60px;
      }
    }

    .no-mirror {
      .amount-modal-icon {
        display: none;
      }
      w-balance-input {
        width: 100%;
      }
    }

    .fee {
      display: flex;
      flex-direction: row;

      .decimal-muted {
        display: none;
      }
    }

    .to-bank-account {
      background: @color-basic-50;
      border: 1px solid @color-basic-200;
      height: 54px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      position: relative;
      border-radius: @border-radius;

      i {
        position: absolute;
        height: 34px;
        width: 56px;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border-left: 1px solid #dae1e9;
        background: url(/img/icons/close.svg) center no-repeat;
        background-size: 18px 18px;
        cursor: pointer;

        &::before {
          width: 38px;
          height: 32px;
          background-size: 38px;
          cursor: pointer;
        }
      }

      span {
        .body-2();
      }
    }

    .flex-row-title {
      display: flex;
      align-items: center;

      div {
        flex-grow: 1;
      }

      w-import-file,
      a {
        flex-grow: 0;
        margin: 4px 0;
      }

      .toggle-mode-container {
        display: block;
        text-align: right;
      }
    }

  }

}

@media screen and (max-width: 540px) {
  md-dialog.modal-send {
    md-dialog-content {
      w-step.send-form{
        .tab-body-wrap {
          padding: 20px 20px 0;
          display: block;
        }
      }

      .qr-code-wrap {
        width: 100%;
        height: auto;
      }

      .modal-content {
        overflow: auto;

        .icon-close {
          right: 10px;
        }

        .buttons-wrapper w-button,
        w-sign-button {
          &::after {
            display: block;
            content: '';
            height: 20px;
          }
        }

        table tr {
          td {
            font-size: @mobile-low-fsize;
          }
          td.headline-3 {
            padding: 10px;
          }
          td:last-child {
            padding: 10px;
            font-size: @mobile-low-fsize;
          }
        }

        .confirm-block w-button {
          width: 45%;
        }

        .asset__name,
        .flex-row.split-half {
          white-space: nowrap;
          font-size: 13px;

          span {
            vertical-align: top;
          }
        }

        w-confirm-gateway-transaction,
        w-confirm-transaction {
          padding: 40px 20px 0;
          max-height: calc(100% ~'+ 60px');

          &::after {
            content: '';
            display: block;
            height: 20px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  md-dialog.modal-send {
    md-dialog-content {

      .read-address-wrap {
        .w-input-wrap input {
          padding-right: 50px;
          font-size: @font-size-caption-2;
        }
      }

      .mobile-ellipsis {
        display: inline-block;
        max-width: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: top;
      }

      w-balance-input w-input .w-input-wrap input[type="text"].big,
      w-select .select .title {
        font-size: @font-size-caption-1;
      }
    }
  }
}
